<script setup>
import { ref } from 'vue'
import { artGetInfoService } from '@/api/article'
import { baseURL } from '@/utils/request'
import { formatTime } from '@/utils/format'
const loading = ref(true)
const ArtData = ref({
  cate_name: '',
  content: '',
  cover_img: '',
  nickname: '',
  pub_date: '',
  title: ''
})
const drawer = ref(false)
const open = async (row) => {
  ArtData.value = {
    cate_name: '',
    content: '',
    cover_img: '',
    nickname: '',
    pub_date: '',
    title: ''
  }
  loading.value = true
  drawer.value = true
  const {
    data: { data }
  } = await artGetInfoService(row.id)
  ArtData.value = data
  ArtData.value.cover_img = baseURL + ArtData.value.cover_img
  loading.value = false
}
defineExpose({
  open
})
</script>

<template>
  <el-drawer v-model="drawer" title="文章预览" size="50%">
    <div v-loading="loading">
      <div v-show="ArtData.nickname">
        <h1>{{ ArtData.title }}</h1>
        <div>作者：{{ ArtData.nickname }}</div>
        <div>发布时间：{{ formatTime(ArtData.pub_date) }}</div>
        <div>文章分类：{{ ArtData.cate_name }}</div>
        <hr />
        <p>
          <img :src="ArtData.cover_img" />
        </p>
        <div v-html="ArtData.content"></div>
      </div>
    </div>
  </el-drawer>
</template>

<style scoped></style>
